<template>
  <el-main class="marginL20">
    <el-row ref="top1">
      <el-col :span="12">
        <el-select v-model="time" :placeholder="$t('placeholder_select')">
          <el-option value ="">{{this.$t("default")}}</el-option>
          <el-option :value ="'5'+$t('minute')">5{{this.$t("minute")}}</el-option>
          <el-option :value ="'10'+$t('minute')">10{{this.$t("minute")}}</el-option>
          <el-option :value ="'30'+$t('minute')">30{{this.$t("minute")}}</el-option>
          <el-option :value ="'60'+$t('minute')">1{{this.$t("hour")}}</el-option>
          <el-option :value ="'120'+$t('minute')">2{{this.$t("hour")}}</el-option>
          <el-option :value ="'180'+$t('minute')">3{{this.$t("hour")}}</el-option>
          <el-option :value ="'360'+$t('minute')">6{{this.$t("hour")}}</el-option>
          <el-option :value="'720'+$t('minute')">12{{this.$t("hour")}}</el-option>
          <el-option :value="'1440'+$t('minute')">1{{this.$t("sky")}}</el-option>
        </el-select>
      </el-col>
      <el-col :span="12" style="text-align:right">
        <el-button @click="onExit" size="small" type="primary" plain>{{$t('exit')}}</el-button>
      </el-col>
    </el-row>
    <div ref="content" style="overflow: auto" class="cpu">
      <div id='cpuLoadChart'  ></div>
      <div id="threadNumChart"  ></div>
      <div id="heapMemoryChart"  ></div>
      <div id="memoryChart"  ></div>
    </div>
    
  </el-main>
</template>

<script>
import echarts from 'echarts';
export default {
  data(){
    return {
      result:[],
      time:"",
      base:null,
      year:null,
      month:null,
      date2:null,
      hour:null,
      minute:null,
      ms:null,
      chart:null,
      threadNumChart:null,
      heapMemoryChart:null,
      memoryChart:null,
      date:[],
      now:null,
      json:null,
      optionCpu:{
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.date
        },
        yAxis: {
          boundaryGap: [0, '100%'],
          type: 'value',
          max:100
        },
        legend: {
          data:['jvm的cpu使用率(%)']
        },
        series: [
          {
            name:'jvm的cpu使用率(%)',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {normal: {}},
            data: this.cpuLoadData
          }
        ]
      },
      optionThread:{
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.date
        },
        yAxis: {
          boundaryGap: [0, '100%'],
          type: 'value'
        },
        color:['#0d0d0d'],
        legend: {
          data:['活动线程数量(个)']
        },
        series: [
          {
            name:'活动线程数量(个)',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'c',
            itemStyle : {  
              normal : {
                lineStyle:{  
                  color:'#0d0d0d'  
                }  
              }  
            },
            data: this.threadData
          }
        ]
      },
      optionHeapMemory:{
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.date
        },
        yAxis: {
          boundaryGap: [0, '100%'],
          type: 'value'
        },
        color:['#006400','#808000'],
        legend: {
          data:['堆内存使用量(mb)','非堆内存使用量(mb)']
        },
        series: [
          {
            name:'堆内存使用量(mb)',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'd',
            data: this.used,
            itemStyle : {  
              normal : {
                lineStyle:{  
                  color:'#006400'  
                }  
              }  
            }
          },
          {
            name:'非堆内存使用量(mb)',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'e',
            data: this.nonUsed,
            itemStyle : {  
              normal : {
                lineStyle:{  
                  color:'#808000'  
                }  
              }  
            }
          }
        ]
      },
      optionMomory:{
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.date
        },
        yAxis: {
          boundaryGap: [0, '100%'],
          type: 'value'
        },
        color:['#8B4513'],
        legend: {
          data:['使用内存(mb)']
        },
        series: [
          {
            name:'使用内存(mb)',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'f',
            data: this.useMomory,
            itemStyle : {  
              normal : {
                lineStyle:{  
                  color:'#8B4513'  
                }  
              }  
            }
          }
        ]
			},
      cpuLoadData:[],
      threadData:[],
      used:[],
      nonUsed:[],
      useMomory:[],
      cpuLoadTime:null,//四个定时器
      threadNumTime:null,
      heapTime:null,
      ramTime:null,
      currentService:{}
    }
  },
  computed:{
  },
  watch:{
    time(){
      this.date=[];
      this.cpuLoadData=[];
      this.threadData=[];
      this.used=[];
      this.nonUsed=[];
      this.useMomory=[];
      this.getData();
      
    }
  },
  props:[
    // "height",
    // "currentService",
  ],
  mounted(){
    let h=(document.documentElement.clientHeight || document.body.clientHeight) -  40 - 22;
    this.$refs.content.style.height=h+"px";
    this.initEcharts();
  },
  created() {
    let queryData = this.$route.query
    this.currentService = JSON.parse(queryData.currentService)
    this.getData();
    this.base = new Date();
    //时分秒
    this.year = this.base.getFullYear();
    this.month = this.base.getMonth() + 1;
    this.date2 = this.base.getDate();
    this.hour = this.base.getHours() < 10 ? "0" + this.base.getHours() : this.base.getHours();
    this.minute = this.base.getMinutes() < 10 ? "0" + this.base.getMinutes() : this.base.getMinutes();

    this.ms = 5 * 1000;
    // this.initEcharts();

    this.cpuLoadTime = setInterval( ()=> {
        this.addCpuLoadData(true);
        this.chart.setOption({
            xAxis: {
                data: this.date
            },
            series: [{
                name: 'jvm的cpu使用率(%)',
                data: this.cpuLoadData
            }]
        });
        
    }, 5000);
    this.threadNumTime = setInterval( ()=> {
        this.addthreadNumData(true);
        this.threadNumChart.setOption({
            xAxis: {
                data: this.date
            },
            series: [{
                name: '活动线程数量(个)',
                data: this.threadData
            }]
        });
    }, 5000);
    this.heapTime = setInterval( ()=> {
        this.addHeapMemoryData(true);
        this.heapMemoryChart.setOption({
            xAxis: {
                data: this.date
            },
            series: [{
                name: '堆内存使用量(mb)',
                data: this.used
            }, {
                name: '非堆内存使用量(mb)',
                data: this.nonUsed
            }]
        });
    }, 5000);
    this.ramTime = setInterval( ()=> {
        this.addMemoryData(true);
        this.memoryChart.setOption({
            xAxis: {
                data: this.date
            },
            series: [{
                name: '使用内存(mb)',
                data: this.useMomory
            }]
        });
    }, 5000);
    this.$once('hook:beforeDestroy', () => {            
      clearInterval(this.cpuLoadTime);
      clearInterval(this.threadNumTime);
      clearInterval(this.heapTime);
      clearInterval(this.ramTime);                               
    })
  },
  
  methods: {
    returnData(){
      let currentService = this.currentService
      this.$api.getEchartsDataStep(currentService,{
        onSucess:resp=>{
          this.json=resp.data;
          this.cpuLoadData.push(this.json.cpuLoad);
          this.threadData.push(this.json.threadNum);
          this.used.push(this.json.heapSizeUsed);
          this.nonUsed.push(this.json.nonHeapSizeUsed);
          this.useMomory.push(this.json.totalMemorySize);
        }
      })
    },
    getData(){
      let t=parseInt(this.time)?parseInt(this.time):"";
      let currentService = this.currentService
      this.$api.getEchartsData(t,currentService,{
        onSucess:resp=>{
          this.result = resp.data;
          this.evalJson(this.result)
          this.optionCpu.xAxis.data=this.date;
          this.optionThread.xAxis.data=this.date;
          this.optionHeapMemory.xAxis.data=this.date;
          this.optionMomory.xAxis.data=this.date;

          this.optionCpu.series[0].data=this.cpuLoadData;
          this.optionThread.series[0].data=this.threadData;
          this.optionHeapMemory.series[0].data=this.used;
          this.optionHeapMemory.series[1].data=this.nonUsed;
          this.optionMomory.series[0].data=this.useMomory;

          if(this.chart){
            this.chart.setOption(this.optionCpu)
            
          }
          if(this.threadNumChart){
            this.threadNumChart.setOption(this.optionThread)
            
          }
          if(this.heapMemoryChart){
            this.heapMemoryChart.setOption(this.optionHeapMemory)
            
          }
          if(this.memoryChart){
            this.memoryChart.setOption(this.optionMomory)
            
          }
        }
      })
    },
    initEcharts(){
      this.chart = echarts.init(document.getElementById('cpuLoadChart'));
      this.threadNumChart = echarts.init(document.getElementById('threadNumChart'));
      this.heapMemoryChart = echarts.init(document.getElementById('heapMemoryChart'));
      this.memoryChart = echarts.init(document.getElementById('memoryChart'));
      this.chart.setOption(this.optionCpu)
      this.threadNumChart.setOption(this.optionThread)
      this.heapMemoryChart.setOption(this.optionHeapMemory)
      this.memoryChart.setOption(this.optionMomory)

    },
    /* 增减的时间，now为放入的时间，addTime在原来的时间里增加的时间数 */
    timeStep(){
      
      this.now = new Date();
        //时分秒
        this.year=this.now.getFullYear();
        this.month=this.now.getMonth()+1;
        this.date2=this.now.getDate();
        this.hour=this.now.getHours() < 10 ? "0" + this.now.getHours() : this.now.getHours();
        this.minute=this.now.getMinutes() < 10 ? "0" + this.now.getMinutes() : this.now.getMinutes();
    },
    addCpuLoadData(shift) {
      this.now = this.year+"/"+this.month+"/"+this.date2+" "+this.hour+":"+this.minute;
      this.date.push(this.now);
      this.returnData();
      if (shift) {
        if(this.cpuLoadData.length>100){
            this.date.shift();
            this.cpuLoadData.shift();
        }
      }
      this.timeStep();
    },
    addthreadNumData(shift) {
      if (shift) {
        if(this.threadData.length>100){
            this.threadData.shift();
        }
      }
		},
    addHeapMemoryData(shift) {
      if (shift) {
        if(this.used.length>100){
            this.used.shift();
            this.nonUsed.shift();
        }
      }
    },
    addMemoryData(shift) {
      if (shift) {
        if(this.useMomory.length>100){
            this.useMomory.shift();
        }
      }
		},
    evalJson(json){
      var myobj=eval(json);
      for(var i=0;i<myobj.length;i++){
        var time=myobj[i].time;
        var cupLoad=myobj[i].cpuLoad;
        var threadNum=myobj[i].threadNum;
        var heapSizeUsed=myobj[i].heapSizeUsed;
        var nonHeapSizeUsed=myobj[i].nonHeapSizeUsed;
        var totalMemorySize=myobj[i].totalMemorySize;
        var newDate=new Date(time);
        //时分秒
          this.year=newDate.getFullYear();
          this.month=newDate.getMonth()+1;
          this.date2=newDate.getDate();
          this.hour=newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours();
          this.minute=newDate.getMinutes() < 10 ? "0" + newDate.getMinutes() : newDate.getMinutes();
          this.now = this.year+"/"+this.month+"/"+this.date2+" "+this.hour+":"+this.minute;
          this.date.push(this.now);
          this.cpuLoadData.push(cupLoad);
          this.threadData.push(threadNum);
          this.used.push(heapSizeUsed);
          this.nonUsed.push(nonHeapSizeUsed);
          this.useMomory.push(totalMemorySize);
      }

    },
    onExit(){
      window.close()
      // this.$emit("exit");
    },
  },
};
</script>
<style lang="scss" scoped>

</style>